<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="../static/css/common.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/uploadVideo.min.css">
    <link type="text/css" rel="stylesheet" href="../static/css/swiper.min.css">
    <link rel="stylesheet" href="../static/css/controls.min.css">
    <script src="../static/js/jquery-1.12.3.min.js"></script>
    <script src="../static/js/flexible.min.js"></script>
    <title>51Talk之星 中华少年说</title>
</head>
<script>
    $(function(){
        var intervaClear;
        
        //播放视频
        var videoPlay = function(){
            $('.video-play').on('click',function(){
                $('video').get(0).play();
                $('.video-play').addClass('not-visible');
                $('.poster-img').addClass('not-display');
            })
            $('video').on('click',function(){
                if($('.video-play').hasClass('not-visible')){
                    $('.video-play').removeClass('not-visible');
                    $('video').get(0).pause();
                }
            })
        }
        //开始上传效果
        var uploadStart = function(){
            $('.upload-back-img').removeClass('not-visible');
            $('.upload-back-word').text('视频上传中...');
            $('.upload-btn').addClass('not-display');
            $('.progress').removeClass('not-display');
        }
        
        //上传过程效果
        var uploading = function (percent){
            //视频遮罩
            $('.upload-back-mask').css('height',percent*1.65+'px');
            $('.progress').text(percent + '%');
        }
        
        //上传结束效果，需要传入视频链接
        var uploadEnd = function (url){
            $('.upload-back-word').addClass('not-display');
            $('.upload-back-mask').addClass('not-display');
            $('.upload-end-word').removeClass('not-display');
            $('.video-play').removeClass('not-display');
            $('.upload-compelete').removeClass('not-display');
            $('video').attr('url',url);
            $('.poster-img').removeClass('not-display');
            $('.upload-btn').addClass('not-display');
            $('.time-img').attr('src','../static/images/uploadVideo/header3.png');
            videoPlay();
        }
        //转码失败
        var transcodeError = function(){
            $('.transcode-word').addClass('not-display');
            $('.transcode-icon').addClass('not-display');
            $('.upload-back-word').removeClass('not-display');
            $('.mask').removeClass('not-display');
            $('.transcode-error').removeClass('not-display');
            $('.file').val("");
            $('.upload-back-img').addClass('not-visible');
            $('.upload-back-word').text('请重新上传视频');
            $('.upload-btn').removeClass('not-display');
            $('.progress').addClass('not-display');
            $('.upload-back-mask').css('height','0px');
            $('.video-play').addClass('not-display');
            $('.upload-end-word').addClass('not-display');
        }

        //后台转码过程 
        var transcode = function(Videourl){
            $('.upload-back-word').addClass('not-display');
            $('.transcode-icon').removeClass('not-display');
            $('.progress').addClass('not-display');
            $('.transcode-word').removeClass('not-display');
            var transcodeClear = setInterval(function(){
                
                //请求转码状态 
                $.ajax({
                    url: "xxxx",//后端链接
                    type: "post",
                    data: {},
                    dataType: "json",
                    success: function(data){
                        //判断是否转码成功 data.isCompelete = 1 时成功
                        if(data.isCompelete == 1 ){
                            $('.transcode-icon').addClass('not-display');
                            $('.transcode-word').addClass('not-display');
                            uploadEnd(Videourl);
                            clearInterval(transcodeClear);
                        }
                        if(error){
                            transcodeError();
                            clearInterval(transcodeClear);
                        }
                    },
                    error: function(data){
                        console.log(data);
                        transcodeError();
                        clearInterval(transcodeClear);
                    }
                });
            },2000);
        }

        //上传视频函数
        var uploadFiles = function(){                                            
            var formData = new FormData();
            formData.append("file",$(".file")[0].files[0]);//append()里面的第一个参数file对应permission/upload里面的参数file
            
            //判断视频大小
            if(($(".file")[0].files[0].size / 1024 / 1024).toFixed(0)>300){
                $('.mask').removeClass('not-display');
                $('.submit-out').removeClass('not-display');
                $('.file').val("");
                return;
            }
            //上传地址
            var submitUrl = '';
            if(submitUrl != ''){
                $.ajax({
                    type:"post",
                    async:true,  //这里要设置异步上传，才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
                    Accept:'text/html;charset=UTF-8',
                    data:formData,
                    contentType:"multipart/form-data",
                    url: submitUrl,
                    processData: false, 
                    contentType: false, 
                    xhr:function(){                        
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // 检查是否存在myXhr属性
                            //开始上传
                            uploadStart();
                            myXhr.upload.addEventListener('progress',function(e){                            
                                var loaded = e.loaded;                  //已经上传大小情况 
                                var total = e.total;                      //附件总大小 
                                var percent = Math.floor(100*loaded/total);     //已经上传的百分比  
                                
                                //上传过程
                                uploading(percent);                                                                
                            }, false);
                        }
                        return myXhr;
                    },                    
                    success:function(data){                      
                        //上传成功
                        transcode(data.url);                       
                    },
                    error:function(){
                        //上传失败
                        console.log("上传失败");
                        $('.mask').removeClass('not-display');
                        $('.submit-error').removeClass('not-display');
                        $('.file').val("");
                        $('.upload-back-img').addClass('not-visible');
                        $('.upload-back-word').text('请重新上传视频');
                        $('.upload-btn').removeClass('not-display');
                        $('.progress').addClass('not-display');
                        $('.upload-back-mask').css('height','0px');
                        $('.video-play').addClass('not-display');
                        $('.upload-end-word').addClass('not-display');
                        $('.upload-back-word').removeClass('not-display');
                    }
                });                             
            }else{
                //模拟上传（正式环境可删除）
                uploadStart(); //开始上传
                uploading(100); //上传过程
                setTimeout(transcode, 1000); //上传结束
            } 
        }
        
        //点击上传视频
        $('.upload-btn').on('click',function(){
            if($('.yuko-radio').hasClass('is-checked')){
                $('.file').click();
                intervaClear = setInterval(() => {
                    if($('.file').val() != ""){
                        uploadFiles();
                        clearInterval(intervaClear);
                    }
                }, 100);
            }else{
                alert('请点击下方先确认授权并同意！');
            }
            
        })
        //确认提交
        $('.commit').on('click',function(){
            console.log('确认提交');
        })
        //重新提交
        $('.resubmit').on('click',function(){
            if($('.yuko-radio').hasClass('is-checked')){
                $('.file').val("");
                $('.file').click();
                intervaClear = setInterval(() => {
                    if($('.file').val() != ""){
                        $('.upload-back-mask').removeClass('not-display');
                        $('.upload-back-mask').css('height','0px');
                        $('.video-play').addClass('not-display');
                        $('.upload-end-word').addClass('not-display');
                        $('.upload-back-word').removeClass('not-display');
                        $('.progress').text('0%');
                        uploadFiles();
                        clearInterval(intervaClear);
                    }
                }, 100);
            }else{
                alert('请先确认授权！');
            }
        })
        
        //取消弹窗
        $('.cancel').on('click',function(){
            $('.mask,.submit-error,.submit-out,.transcode-error').addClass('not-display');
        })
        //同意授权
        $(".confirm1 .yuko-radio").on("click",function(){
            $(this).hasClass('is-checked') ? $(this).removeClass('is-checked') : $(this).addClass('is-checked');
        });

        //初始化判断是否已上传
        $.ajax({
            url: "xxxx",//后端链接
            type: "post",
            data: {},
            dataType: "json",
            success: function(data){
                //判断是否已上传
                if(data.isCompelete == 1 ){
                    uploadEnd(data.url);//传入视频链接
                }
                
            },
            error: function(data){
                console.log(data);
            }
        });

    })
</script>
<body>
    <div class="header">
        <div class="time">
            <img class="time-img" src="../static/images/uploadVideo/header2.png" />
            <!---倒计时天数-->
            <p class="time-word">86</p>
        </div>
        <div class="rule">
            <img class="rule-img" src="../static/images/activityRule.png" />
        </div>
    </div>
    <section class="select-themes">
            <img src="../static/images/uploadVideo/select_themes2.png"/>
    </section>
    <section class="upload-box">
        <div class="upload-back">
            <video class="upload-back-img not-visible" poster="../static/images/uploadVideo/video_pic2.png" playsinline  controls="false" x5-playsinline="" playsinline="" webkit-playsinline=""></video>
            <img class="poster-img not-display" src="../static/images/uploadVideo/video_pic.png" />
            <div class="upload-back-mask"></div>
            <p class="upload-back-word">等待上传视频</p>
            <div class="video-play not-display"></div>
            <div class="transcode-icon not-display"></div>
        </div>
        <div class="upload-btn"></div>
        <div class="progress not-display">0%</div>
        <div class="transcode-word not-display">
            <div class="transcoding"></div>
            <p>视频转码中，预计需要2-3分钟，请稍等</p>
        </div>
        <div class="upload-end-word not-display">完成上传<br/><span>点击播放按钮预览</span></div>
        <p class="illus">
                作品要求：时长2分钟以内，不超过300M<br/>
                请横屏录制，确保孩子人物与声音足够清晰
        </p>
    </section>
    <div class="confirm1">
        <div class="yuko-radio">
            <input type="radio" class="yuko-radio_input" name="rd" checked="">
            <span class="yuko-radio_outer-circle"></span>
            <span class="yuko-radio_inner-circle"></span>
        </div>
        <span class="confirm1-word">授权并同意大赛主办方、承办方使用视频中<br/>
                人物肖像进行宣传推广
        </span>
    </div>
    <div class="upload-compelete not-display">
        <div class="resubmit"></div>
        <div class="commit"></div>
    </div>
    <div class="mask not-display">
        <div class="submit-error not-display"><div class="cancel"></div></div>
        <div class="submit-out not-display"><div class="cancel"></div></div>
        <div class="transcode-error not-display">
            <div class="cancel"></div>
            <h3>转码失败</h3>
            <p>视频转码失败，请确认视频文件正常，然后重新上传尝试</p>
        </div>
    </div>
    <input class="file not-visible" type="file"  name="file" value=""/>
    <iframe id="rule" name="rule" src="rule.html"></iframe>
    <script src="../static/js/common.min.js"></script>
</body>
</html>